<template>
  <view>
    <u-popup
      :show="show"
      mode="center"
      :closeable="false"
      :round="12"
      :closeOnClickOverlay="false"
      bgColor="transparent"
    >
      <view class="popDialog">
        <view class="coupon2" @click="receiveCoupon()">
          <image
            :src="$util.img(couponInfo.coupon_img)"
            mode="aspectFill"
            lazy-load
          ></image>
        </view>
        <image
          :src="$util.img('image/sanqi/close.png')"
          class="closeimg"
          @click="close()"
        ></image>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: "coupon",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    couponInfo: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("close");
    },
    receiveCoupon() {
      this.$emit("receiveCoupon", this.couponInfo.return_coupon);
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon2 {
  position: relative;
  width: 750rpx;
  height: 750rpx;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  box-sizing: border-box;
  image {
    width: 100%;
    height: 100%;
  }
}
.closeimg {
  width: 82rpx;
  height: 82rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  position: absolute;
  left: 50%;
  bottom: -100rpx;
  transform: translateX(-50%);
}
</style>
